<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2022/12/29
  Time: 11:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%String path = request.getContextPath()+"/";%>
<!doctype html>
<html>
<head>
    <title>Title</title>
    <base href="<%=path%>">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table.min.css">
    <link rel="stylesheet" href="static/ztree/css/zTreeStyle/zTreeStyle.css">
    <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</head>
<style>
.query{
    height: 54px;
    border-radius: 6px;
    padding: 10px 10px;
    box-shadow: 1px 1px 3px rgb(0 0 0 / 20%);
}
</style>
<body>
<div class="container-fluid">
   <div class="row" >
       <div  class="col-xs-2" style="background-color: #f3f3f4;padding:0px 0px;">
           <div class="panel panel-default" style="height:1800px;margin: 0px 0px;background-color: #ffffff">
               <div class="panel-heading">组织机构</div>
               <div class="panel-body ztree" id="tree">
               </div>

           </div>
       </div>
       <div class="col-xs-10" style="background-color: #f3f3f4;padding:0px 0px;">
           <div style="height:800px;margin: 15px 15px;background-color: #f3f3f4">
               <div class="row" style="padding: 0px 15px 15px 15px;">
                   <div class="col-xs-12 query" style="background-color: #ffffff">
                       <form class="form-inline" id="queryForm">
                           <div class="form-group">
                               <label >登录名称</label>

                               <input type="text" name="loginName" class="form-control"  placeholder="登录名">
                           </div>
                           <div class="form-group">
                               <label >手机号</label>
                               <input type="text" name="mobiile" class="form-control" id="exampleInputEmail2" placeholder="手机号">
                           </div>
                           <div class="form-group">
                               <label >状态</label>
                               <select class="form-control" name="status">
                                   <option value="-1">所有</option>
                                   <option value="0">正常</option>
                                   <option value="1">停用</option>
                               </select>
                           </div>
                           <div class="form-group">
                               <label >创建时间</label>
                               <input type="text" class="form-control" style="width: 80px;">-<input type="email" class="form-control"  style="width: 80px;">
                           </div>
                           <button type="button" class="btn btn-primary " onclick="$.table.search();"><span class="glyphicon glyphicon-search"></span>搜索</button>

                           <button type="button" class="btn btn-success" onclick="$.table.reset();"><span class="glyphicon glyphicon-refresh"></span>重置</button>
                           <input type="text" name="deptId" id="deptId" style="width: 0px;height: 0px;visibility: hidden">
                       </form>
                   </div>
               </div>
               <div class="row" style="padding: 0px 15px;">
                   <div class="col-xs-12" style="background-color: #ffffff;padding-top:10px; ">
                       <table id="table"></table>
                       <div id="toolbar">
                           <shiro:hasPermission name="userAdd">
                                <button type="button" class="btn btn-primary btn-xs" onclick="$.modal.openWin('新增用户信息','user/toAdd');"><span class="glyphicon glyphicon-plus"></span>新增</button>
                           </shiro:hasPermission>
                           <shiro:hasPermission name="userEdit">
                                <button type="button" class="btn btn-primary btn-xs" onclick="edit2();"><span class="glyphicon glyphicon-edit" ></span>编辑</button>
                           </shiro:hasPermission>
                           <shiro:hasPermission name="userDelete">
                                <button type="button" class="btn btn-primary btn-xs" onclick="deletes();"><span class="glyphicon glyphicon-trash"></span>删除</button>
                           </shiro:hasPermission>
                           <button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-save"></span>导入</button>
                           <button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-open"></span>导出</button>

                       </div>
                   </div>

               </div>
           </div>
       </div>
   </div>
</div>
</body>
<script src="https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table-locale-all.min.js"></script>
<script src="static/js/layer/layer.js"></script>
<script src="static/ztree/js/jquery.ztree.core.js"></script>
<script src="static/js/sofwin.js"></script>
<script>
    function refresh(){
        $.table.search();
    }
    function edit(id){
        $.modal.openWin("编辑用户信息","user/toAdd?id="+id);
    }
    function deletes(){
        var rows = $table.bootstrapTable('getSelections');
        // 判断rows的长度如果不等于1 ，提示请选择需要修改的一条数据
        if(rows.length==0){
            layer.msg('请选择需要删除的数据');
            return;
        }
        // 有选择的的数据
        var url='user/delete?';
        for(var i=0;i<rows.length;i++){
            url+="ids="+rows[i].id+"&";
        }
        $.operator.delete(url);
    }
    function edit2(){
        var rows = $table.bootstrapTable('getSelections');
        // 判断rows的长度如果不等于1 ，提示请选择需要修改的一条数据
        if(rows.length==0){
            layer.msg('请选择需要编辑的数据');
            return;
        }
        if(rows.length>1){
            layer.msg("请最多选择一条需要编辑的数据");
            return;
        }
        edit(rows[0].id);
        // 如果rows的长度==1 【0】对象是不是就是当前的用户信息，可以获取到当前用户的id

    }
    var options = {
      url:'user/data',
      columns: [{
          checkbox: true
      },{
          field: 'id',
          title: '用户ID'
      }, {
          field: 'userName',
          title: '用户名',
          visible: false
      }, {
          field: 'loginName',
          title: '登录名',
          // 不显示在下拉列表中
          switchable: false
      },{
          field: 'sex',
          title: '性别',
          formatter:function(value,row,index,field){
              if(value==0){
                  return '男';
              }
              return '女';
          }
      },{
          title:'操作',
          width: 200,
          align: 'center',
          formatter:function(value,row,index,field){
              return '<button type="button" class="btn btn-primary btn-xs" onclick="edit('+row.id+');"><span class="glyphicon glyphicon-edit" ></span>编辑</button>'+
                  '&nbsp;&nbsp;<button type="button" class="btn btn-primary btn-xs" onclick="$.operator.delete(\'user/delete/'+row.id+'\')"><span class="glyphicon glyphicon-trash" ></span>删除</button>';
          }
      }]
    };
    $.table.init(options);
    // 定义了对象，用来保存创建的树
    var zTreeObj;
    // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
    var setting = {
        data: {
            simpleData: {
                enable: true, // 简单类型
                idKey: "id", // 节点的id所对应的属性的属性名
                pIdKey: "parentId",// 当前节点的父节点的属性名
                rootPId: 0 // 根节点的值
            }
        },
        callback: {
            onClick: function(event,treeId,treeNode,clickFlag){
                var nodeId = treeNode.id;
                $("#deptId").val(nodeId);
                refresh();
            }
        }
    };
    // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
    // 为树准备的数据
    var zNodes = [];

    // 将zNodes的固定数据改为从数据库中获取
    // 异步请求需要返回的responseEntity中的result必须是一个LIst集合
    // 集合中存放的数据必须包含有 name,open,children
    $(document).ready(function(){
        // 用于创建树的方法
        // 参数1： jquery对象，需要将树渲染到的节点
        // 参数2： 树的配置
        // 参数3： 树的节点数据
        $.operator.get('dept/allDept',function(ret){
            zNodes = ret.result;
            zTreeObj = $.fn.zTree.init($("#tree"), setting, zNodes);
        })

    });
</script>
</html>
